<template>
  <div class="imagesResource">
    <filter-bar ref="imageTop" :mediaType="mediaType" :timeField="timeField" @getFilterCondition="filterConditionHandle" @childStyle="iscollapseHandle"></filter-bar>
    <div class="right-menu"></div>
    <div class="MenulistType"></div>
    <div class="timerline" id="timerlinser" :class="MenulistType == 'table' ? 'activity' : ''">

    </div>
    <el-backtop v-show="MenulistType == 'min'" target=".minicon_left" :visibility-height="100" style="right: 373px; bottom: 40px; background: #f5f6fa"></el-backtop>

       
    <!-- 左右按钮轮播切换 -->
    <div v-show="showViewer" v-if="this.viewList.length !== 1" class="viewer_image imageView_left" @click="imgLeft()">
      <i title="上一张" class="el-icon-arrow-left"></i>
    </div>
    <div v-show="showViewer" v-if="this.viewList.length !== 1" class="viewer_image imageView_right" @click="imgRight()">
      <!-- <img src="@/assets/images/toright@2x.png" alt="" /> -->
      <i title="下一张" class="el-icon-arrow-right"></i>
    </div>
    <!-- 底部图片列表 -->
    <div v-show="bottomList" class="View">
      <ul class="Img_ul" id="infomationTitleUl">
        <li v-for="(item, index) in viewList" :key="index" class="Img_li" :style="imgStyle" @click="changeImg(item, index)">
          <img :class="index === imgActiveIndex ? 'img_activeBorder' : 'swiper_active'" :src="item.url" />
        </li>
      </ul>
    </div>

    <image-Viewer v-if="showViewer" :on-close="closeViewer" :url-list="srcList">
      <el-tooltip class="item" effect="dark" content="下载" placement="top">
        <i class="el-icon-download" style="cursor: pointer;" @click="downimgHandle" v-if="authorities.hasOwnProperty('pulicityCenter-downimg')"></i>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="修改信息" placement="top">
        <div class="iconeidt" style="cursor: pointer;" @click="editsHandle" v-if="authorities.hasOwnProperty('pulicityCenter-editsImag')">
          <i class="el-icon-edit" title="编辑"></i>
        </div>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="详情" placement="top">
        <div class="iconxqing" style="cursor: pointer;" @click="detailHandle" v-if="authorities.hasOwnProperty('pulicityCenter-Imagdetail')">
          <i class="el-icon-warning-outline"></i>
        </div>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="删除该图" placement="top">
        <div class="icondelt" style="cursor: pointer;" @click="deteleHendle" v-if="authorities.hasOwnProperty('pulicityCenter-Imagdetele')">
          <i class="el-icon-delete"></i>
        </div>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="识别文字" placement="top">
        <div class="isShowicon" v-if="authorities.hasOwnProperty('pulicityCenter-ImagOcr')" @click="searchkHanleimage">
          <img src="@/assets/img/OCR.png" alt="" />
        </div>
      </el-tooltip>

      <el-tooltip class="item" effect="dark" content="搜人物" placement="top">
        <div class="isShowicon" v-if="authorities.hasOwnProperty('pulicityCenter-faceSo')" @click="searchfaceHandle">
          <img src="@/assets/img/faceSo.png" alt="" />
        </div>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="搜图" placement="top">
        <i class="isShowicon" v-if="authorities.hasOwnProperty('pulicityCenter-imageSo')" @click="searchimageHandle">
          <img src="@/assets/img/imageSo.png" alt="" />
        </i>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="缩略图" placement="top">
        <div class="foldCalss" @click="clickbottomHandle">
          <img v-if='bottomList' src="@/assets/img/thumb-3-hover.png" alt="">
          <img v-else src="@/assets/img/normal-3.png" alt="">
        </div>
      </el-tooltip>
      <!-- <div class="buttom_list">
        <div v-show="showViewer" class="View">
          <ul class="Img_ul">
            <li v-for="(item, index) in viewList" :key="index" class="Img_li" :style="imgStyle" @click="changeImg(item, index)">
              <img :class="index === imgActiveIndex ? 'img_activeBorder' : ''" :src="item.url" style="width: 100%; height: 100%; objectfit: contain" />
            </li>
          </ul>
        </div>
      </div> -->
    </image-Viewer>
    <!-- 查看图片插件 -->
    <!-- <image-View :previewVisible="previewVisible" :shortTimeObj="shortTimeObj" :previewVisibleArr="previewVisibleArr" @closeHandle="previewVisibleHandle" @refresHandle="refresHandle" :nowSelect="nowSelect" :mediaPreviewTagTrue="mediaPreviewTag"></image-View> -->
    <!-- 新版查看图片插件 -->
    <!-- <newImage-View :viewerArr="viewerArr" :previewVisible="previewVisible" :nowSelect="nowSelect"></newImage-View> -->
  </div>
</template>

<script>
export default {
  components: {
    imageViewer,
    filterBar,
    imageView,
    newImageView,
    editMedia,
    selectTags: (resolve) => {
      require([
        "@/components/dialog/showDialog/gdeeResource/selectTags.vue",
      ], resolve);
    },
  },
  computed: {
    imgStyle() {
      return {
        transform: `translate3d(${this.imgDistance}px, 0, 0)`, // 计算移动的距离(x,y,z)
      };
    },
    ...mapGetters([
      "myAuthorities",
      "MenulistType",
      "checkAll",
      "switchValue",
      "isRefresh",
      "isShowView",
    ]),
    iconscrollTop() {
      return this.$refs.iconscrollTop;
    },
  },
  methods: {
    clickhandleView(_item) {
      this.ocrView = _item;
    },

    searchimageHandle() {
      this.isShowImageApi = !this.isShowImageApi;
      if (this.isShowImageApi == true) {
        this.imageloading = true;
        this.viewList.forEach((item, index) => {
          if (index == this.imgActiveIndex) {
            let params = {};
            params.id = this.viewList[index].id;
            searchImageApi(params).then((res) => {
              if (res.code == 0) {
                this.imageloading = false;
                this.showImageList = res.data;
              } else if (res.code != 0) {
                thiss.imageloading = false;
              }
            });
          }
        });
      }
      if (this.isShowImageApi == false) {
        this.isShowOcr = false;
        this.showImageList = [];
      }
    },
    clickbottomHandle() {
      this.bottomList = !this.bottomList;
      if (this.MenulistType === "table") {
        let warpButton = document.querySelector(".Img_ul");
        warpButton.style.transform = "translateX(30%)";
      } else {
        let warpButton = document.querySelector(".Img_ul");
        warpButton.style.transform = "translateX(0%)";
      }
    },
    searchkHanleimage() {
      this.isShowOcr = !this.isShowOcr;
      this.ocrView = "OCR";
      this.ocrShow = true;
      this.faceShow = false;
      if (this.isShowOcr == true) {
        this.viewList.forEach((item, index) => {
          if (index == this.imgActiveIndex) {
            this.viewList[index];

            let arr = [];
            arr.push(this.viewList[index].id);
            let params = {};
            params.resIds = arr;
            this.loading = true;
            getImgsRecognition(params, "xuanguan").then((res) => {
              if (res.code == 0) {
                this.loading = false;
                const data = res.data;
                data.forEach((el) => {
                  if (el.generalTags && el.generalTags.length > 0) {
                    this.generalTagsOcr = el.generalTags;
                  }
                  if (el.peopleTags && el.peopleTags.length > 0) {
                    this.peopleTagsOcr = el.peopleTags;
                  }
                });
                arr = [];
              }
            });
          }
        });
      }
      if (this.isShowOcr == false) {
        // this.move();
        this.isShowImageApi == false;
        this.isShow == false;
      }
    },
    searchfaceHandle() {
      this.isShowOcr = !this.isShowOcr;
      this.faceShow = true;
      this.ocrShow = false;
      this.ocrView = "CHARACTERS";
      this.isShowImageApi == false;
      this.isShow == false;
      if (this.isShowOcr == true) {
        this.viewList.forEach((item, index) => {
          if (index == this.imgActiveIndex) {
            this.viewList[index];

            let arr = [];
            arr.push(this.viewList[index].id);
            let params = {};
            params.resIds = arr;
            this.loading = true;
            getImgsRecognition(params, "xuanguan").then((res) => {
              if (res.code == 0) {
                this.loading = false;
                const data = res.data;
                data.forEach((el) => {
                  if (el.generalTags && el.generalTags.length > 0) {
                    this.generalTagsOcr = el.generalTags;
                  }
                  if (el.peopleTags && el.peopleTags.length > 0) {
                    this.peopleTagsOcr = el.peopleTags;
                  }
                });
                arr = [];
              }
            });
          }
        });
      }
    },
    // 停止页面滚动

    // 开启页面滚动
    move() {
      const m = (e) => {
        e.preventDefault();
      };
      let warp = document.querySelector(".el-image-viewer__mask");
      warp.style.overflow = "auto";
      warp.removeEventListener("touchmove", m, true);
    },

    cliclTableHandle(item) {
      this.viewList.push(item);
      this.tableList.forEach((el) => {
        this.viewList.push(el);
      });
      let obj2 = {};
      let res2 = [];
      res2 = this.viewList.reduce((prev, item) => {
        obj2[item.id] ? "" : (obj2[item.id] = true && prev.push(item));
        return prev;
      }, []);
      this.viewList = res2;
      let params = {};
      params.resId = item.id;
      params.pictureStyle = "Picture_preview_w_1600";
      getDetailfile(params).then((res) => {
        if (res.code == 0) {
          this.srcList.push(res.data.url);
        }
      });
      this.showViewer = true;
    },
    cloesIconHandle() {
      this.isShow = false;
      this.isShowOcr = false;
      this.isShowImageApi = false;
    },
    isShowViewdeteleHandle() {
      this.$nextTick(() => {
        for (let i = 0; i < this.viewList.length; i++) {
          // 删除新逻辑 i才是下标
          if (i == this.imgActiveIndex) {
            scrapFile({ ids: this.viewList[i].id }).then((res) => {
              if (res.code == 0) {
                this.$message({ message: "删除成功", type: "success" });
                this.viewList.splice(i, 1);
                if (this.viewList.length == 0) {
                  this.srcList = [];
                  this.tipsDialogVisible = false;
                  this.showViewer = false;
                  this.isSuccess = true;
                } else if (this.viewList.length > 0) {
                  this.tipsDialogVisible = false;
                  this.srcList = [];
                  this.srcList.push(this.viewList[0].url);
                  // let params = {};
                  // params.resId = this.viewList[0].id;
                  // params.pictureStyle = "Picture_preview_w_1600";
                  // getDetailfile(params).then((res) => {
                  //   if (res.code == 0) {
                  //     this.srcList.push(res.data.url);
                  //   }
                  // });
                  // this.srcList.push(this.viewList[0].url);
                  this.isShowData = this.viewList[0];
                  this.imgActiveIndex = 0;
                  this.isSuccess = true;
                }
              } else {
                this.tipsDialogVisible = false;
              }
            });
          }
        }
      });
    },
    // 详情点击
    detailHandle() {
      this.isShow = !this.isShow;
      this.viewList.forEach((item, index) => {
        if (item.url == this.srcList) {
          this.isShowData = item;
          // this.isShowData.description = this.isShowData.description.replace(
          //   /&nbsp;/g,
          //   ""
          // );

          // this.isShowData.description = this.isShowData.description.replace(
          //   /amp;/g,
          //   ""
          // );
          // this.isShowData.description = this.isShowData.description.replace(
          //   /&/g,
          //   ""
          // );
        }
        if (index == this.imgActiveIndex) {
          this.isShowData = item;
          // this.isShowData.description = this.isShowData.description.replace(
          //   /&nbsp;/g,
          //   ""
          // );

          // this.isShowData.description = this.isShowData.description.replace(
          //   /amp;/g,
          //   ""
          // );
          // this.isShowData.description = this.isShowData.description.replace(
          //   /&/g,
          //   ""
          // );
        }
      });
    },
    // 编辑按钮
    editsHandle() {
      this.viewList.forEach((item, index) => {
        if (index == this.imgActiveIndex) {
          this.mediaPreviewTag = true;
          this.selectMedia = this.viewList[index];
        }
        if (item.url == this.srcList) {
          this.mediaPreviewTag = true;
          this.selectMedia = item;
        }
      });
    },
    // 下载按钮
    downimgHandle() {
      this.viewList.forEach((item, index) => {
        if (index == this.imgActiveIndex) {
          getDownloadLinkData({ ids: this.viewList[index].id }).then((res) => {
            if (res.code == 0) {
              res.data.forEach((el) => {
                const name = el.description
                  ? el.description.split(".").shift() + "." + el.suffix
                  : el.fileName;
                const fileType = "IMAGE";
                const downloadUrl =
                  this.$GLOBALVAR.locationProtocol +
                  el.downloadUrl.slice(el.downloadUrl.indexOf("//"));
                commonDownloadSave(downloadUrl, name, fileType);
              });
            } else {
              this.$messge({
                message: res.message,
                type: "error",
              });
            }
          });
        }
      });
    },
    deteleHendle() {
      this.tipsDialogVisible = true;
    },
    changeImg(item, index) {
      this.$nextTick(() => {
        this.isShowOcr = false;
        this.isShowImageApi = false;
        this.srcList = [];
        // let params = {};
        // params.resId = item.id;
        // params.pictureStyle = "Picture_preview_w_1600";
        // getDetailfile(params).then((res) => {
        //   if (res.code == 0) {
        //     this.srcList.push(res.data.url);
        //   }
        // });
        this.srcList.push(item.url);
        this.isShowData = item;
        this.mainImgUrl = item;
        this.imgActiveIndex = index;
      });
    },
    imgLeft() {
      this.showImageList = [];
      this.peopleTagsOcr = [];
      this.generalTagsOcr = [];
      if (this.isShowOcr == true || this.isShowImageApi == true) {
        this.isShowOcr = false;
        this.isShowImageApi = false;
        this.isShow = false;
        // this.isShow = false;
      }

      if (this.imgActiveIndex > 0) {
        this.imgActiveIndex--; // 索引值-1
        this.viewList.forEach((item, index) => {
          // 循环小图,通过判断索引值赋值给大图
          if (this.imgActiveIndex === index) {
            // this.mainImgUrl = item;
            this.srcList = [];
            // let params = {};
            // params.resId = item.id;
            // params.pictureStyle = "Picture_preview_w_1600";
            // getDetailfile(params).then((res) => {
            //   if (res.code == 0) {
            //     this.srcList.push(res.data.url);
            //   }
            // });
            this.srcList.push(this.viewList[index].url);

            this.isShowData = this.viewList[index];
          }
        });
      }
      // if (this.imgActiveIndex >= 13) {
      //   var index = 0;
      //   const temp = window.setInterval(() => {
      //     // 利用定时器实现图片左右移动的动画效果
      //     if (index < 40) {
      //       // 移动次数(33次)
      //       this.imgDistance += 2; // 每次向左移动的距离 (移动总距离为33*this.imgDistance)
      //       index++;
      //       return;
      //     } else {
      //       window.clearInterval(temp); // 移动完清除定时器
      //     }
      //   }, 10);
      // }
    },
    imgRight() {
      this.showImageList = [];
      this.peopleTagsOcr = [];
      this.generalTagsOcr = [];
      if (this.isShowOcr == true || this.isShowImageApi == true) {
        this.isShowOcr = false;
        this.isShowImageApi = false;
        this.isShow = false;
      }

      if (this.imgActiveIndex < this.viewList.length - 1) {
        this.imgActiveIndex++;
        this.viewList.forEach((item, index) => {
          if (this.imgActiveIndex === index) {
            this.srcList = [];
            this.srcList.push(this.viewList[index].url);
            this.isShowData = this.viewList[index];
          }
        });
        // this.imgDistance怎么拿到66px的 这里？
        // if (this.screenWidth / 80 == this.imgActiveIndex) {
        // this.allDistance = -80 * (this.imgActiveIndex - 4);
        var index = 0;
        const temp = window.setInterval(() => {
          // 边距和图片大小 ===============
          if (index < 40) {
            this.imgDistance -= 2; // 每次向右移动的距离
            index++;
            return;
          } else {
            window.clearInterval(temp);
          }
        }, 1);
        console.log(index, this.imgDistance, this.allDistance);
        // }
        console.log(
          this.viewList.length * 80,
          this.imgDistance,
          this.allDistance
        );
      }
      // else if (this.imgActiveIndex === this.viewList.length - 1) {
      //   // 到达最后一张图片，再点击跳转回第一张
      //   this.imgActiveIndex = 0;
      //   this.mainImgUrl = this.viewList[0];
      //   var index = 0;
      //   this.srcList = [];
      //   // let params = {};
      //   // params.resId = this.viewList[0].id;
      //   // params.pictureStyle = "Picture_preview_w_1600";
      //   // getDetailfile(params).then((res) => {
      //   //   if (res.code == 0) {
      //   //     this.srcList.push(res.data.url);
      //   //   }
      //   // });
      //   this.srcList.push(this.viewList[0].url);
      //   this.isShowData = this.viewList[0];
      //   const temp = window.setInterval(() => {
      //     // 利用定时器实现图片左右移动的动画效果
      //     if (index < Math.abs(this.allDistance / 12)) {
      //       // 取绝对值再除
      //       this.imgDistance += 2; // 每次向左移动的距离 (移动总距离为80*this.imgDistance)
      //       index++;
      //       return;
      //     } else {
      //       window.clearInterval(temp); // 移动完清除定时器
      //     }
      //   }, 0.2);
      // }
    },
    closeViewer() {
      this.bottomList = false;
      if (this.viewList.length > 1) {
        let warpright = document.querySelector(".imageView_right");
        warpright.style.right = "10%";
      }
      this.showViewer = false;
      this.srcList = [];
      this.viewList = [];
      this.$store.commit("SET_ISSHOWVIEW", false);
      this.imgActiveIndex = 0;
      this.imgDistance = 0;
      this.allDistance = 0;
      this.isShow = false;
      this.isShowImageApi = false;
      this.isShowOcr = false;
      this.peopleTagsOcr = [];
      this.generalTagsOcr = [];
      this.showImageList = [];
      if (this.isSuccess == true) {
        this.getIconData(0);
      }
    },
    acceptHandle(item) {
      this.newmediaForm = item;
      let that = this;
      that.$nextTick(function () {
        let arr = [];
        that.monthsObjsArr.forEach((item) => {
          arr.push(item);
        });
      });
    },
    ImageselectHandle(item, index1) {
      this.isActive = index1;
      this.isActiveId = item.id;
      let params = {};
      params.pictureStyle = "Picture_preview_w_500";
      params.resId = item.id;
      getDetailfile(params).then((res) => {
        if (res.code == 0) {
          this.MiniImageArr = res.data;
        }
      });
    },
    handleCheckedCitiesChange(item, index) {
      this.MiniImageArr = item;
    },
    handleImHandle(item, index) {
      // console.log(item, index);
    },
    edit() {
      this.isEdit = !this.isEdit;
      this.ruleForm.photographer = this.selectImages.photographer;
      this.ruleForm.activityTime = this.selectImages.activityTime;
      this.ruleForm.description = this.selectImages.description;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.description = this.$refs[formName].model.description;
          this.ruleForm.photographer = this.$refs[formName].model.photographer;
          if (
            this.$refs[formName].model.activityTime ==
            this.selectImages.activityTime
          ) {
            this.$refs[formName].model.activityTime =
              this.$refs[formName].model.activityTime.concat("-01");
          }
          this.ruleForm.activityTime = this.$refs[formName].model.activityTime;
          this.ruleForm.id = this.selectImages.id;
          updateFile(this.ruleForm).then((res) => {
            if (res.code === 0) {
              this.$message({
                message: "编辑成功",
                type: "success",
              });
              this.MiniImageArr.photographer = this.ruleForm.photographer;
              this.MiniImageArr.activityTime = this.ruleForm.activityTime;
              this.MiniImageArr.description = this.ruleForm.description;
              this.ruleForm = {
                photographer: "",
                activityTime: "",
                description: "",
              };
            }
            if (this.MenulistType == "min") {
              this.mediaPreview = false;
              this.isEdit = this.isEdit;
              this.getMinData(0);
            } else {
              //this.initFileOptButton();
              this.getTableData(1);
              this.mediaPreview = false;
              this.isEdit = this.isEdit;
            }
            this.isEdit = !this.isEdit;
          });
        } else {
          return false;
        }
      });
    },
    cancel() {
      this.isEdit = !this.isEdit;
    },

    //文件弹出菜单按钮项
    initFileOptButton() {
      this.buttonArr = [
        { label: "编辑", handle: "pushtag" },
        // {
        //   label: "编辑",
        //   handle: "rename",
        //   // auth: this.authorities.hasOwnProperty(
        //   //   "publicityCenter-allFile-chongmingming"
        //   // ),
        // },
        {
          label: "下载",
          handle: "download",
          // auth: this.authorities.hasOwnProperty(
          //   "publicityCenter-allFile-xiazai"
          // ),
        },
        {
          label: "移入回收站",
          handle: "delete",
          // auth: this.authorities.hasOwnProperty(
          //   "publicityCenter-allFile-yiruhuishouzhan"
          // ),
        },
        { label: "查看文件信息", handle: "preview-detail", auth: true },
      ];
    },
    // 获取大图数据  ismore>0时加载更多
    getIconData(ismore) {
      if (ismore == 0) {
        this.monthsObjsArr = [];
      }
      var p = [];
      for (
        var i = ismore;
        i < ismore + 3 && i < this.showMonthList.length;
        i++
      ) {
        let params = {};
        params.page = 1;
        params.size = 20;
        params.sortBy = "createdOn";
        params.orderMode = 1;
        // params.sortBy = this.timeField;
        params.timeField = this.timeField;
        params.sortMode = 0;
        params.mediaType = this.mediaType;
        // 1600
        params.pictureStyle = "Picture_preview_w_1600";
        // params.
        var dates = getMonthStartAndEnd(
          this.showMonthList[i],
          "yyyy-MM-dd hh:mm:ss"
        );
        if (this.switchValue == true) {
          params.belong = "person";
        }
        if (dates) {
          if (this.timeField === "createdOn") {
            params.createdOnFrom = dates[0];
            params.createdOnTo = dates[1];
          }
          if (this.timeField === "shootTime") {
            params.shootTimeOnFrom = dates[0];
            params.shootTimeOnTo = dates[1];
          }
          if (this.timeField === "activityTime") {
            params.activityTimeOnFrom = dates[0];
            params.activityTimeOnTo = dates[1]; //
          }
        }
        //区域筛选条件
        if (this.selectedFolderIdList.length > 0) {
          params.folderIds = this.selectedFolderIdList.toString();
        }
        //标签筛选条件
        if (this.selectedTags.length > 0) {
          params.businessTags = this.selectedTags.toString();
        }
        var np = new Promise((resolve, reject) => {
          this.getFileList(params, this.showMonthList[i], resolve, params.page);
        });
        p.push(np);
      }
      // 排序问题
      Promise.all(p).then((res) => {
        res.forEach((data) => {
          this.$nextTick(() => {
            this.monthsObjsArr.push(data);
            if (ismore == 0 && this.monthsObjsArr.length == 6) {
              let obj2 = {};
              let res2 = [];
              res2 = this.monthsObjsArr.reduce((prev, item) => {
                obj2[item.yearMonth]
                  ? ""
                  : (obj2[item.yearMonth] = true && prev.push(item));
                return prev;
              }, []);
              this.monthsObjsArr = res2;
            }
            if (ismore == 0 && this.monthsObjsArr.length == 4) {
              let obj2 = {};
              let res2 = [];
              res2 = this.monthsObjsArr.reduce((prev, item) => {
                obj2[item.yearMonth]
                  ? ""
                  : (obj2[item.yearMonth] = true && prev.push(item));
                return prev;
              }, []);
              this.monthsObjsArr = res2;
            }
            if (ismore == 0 && this.monthsObjsArr.length == 2) {
              let obj2 = {};
              let res2 = [];
              res2 = this.monthsObjsArr.reduce((prev, item) => {
                obj2[item.yearMonth]
                  ? ""
                  : (obj2[item.yearMonth] = true && prev.push(item));
                return prev;
              }, []);
              this.monthsObjsArr = res2;
              this.monthsObjsArr.forEach((item) => {});
            }
          });
        });
      });
      this.monthMore = ismore + 3;
      this.isSuccess = false;
    },
    // 获取小图数据
    getMinData(ismore) {
      if (ismore == 0) {
        this.monthsObjsArr = [];
      }
      var p = [];
      for (
        var i = ismore;
        i < ismore + 3 && i < this.showMonthList.length;
        i++
      ) {
        let params = {};
        params.page = 1;
        params.size = 20;
        params.sortBy = this.timeField;
        params.timeField = this.timeField;
        params.sortMode = 0;
        params.mediaType = this.mediaType;
        var dates = getMonthStartAndEnd(
          this.showMonthList[i],
          "yyyy-MM-dd hh:mm:ss"
        );
        if (this.switchValue == true) {
          params.belong = "person";
        }
        if (dates) {
          if (this.timeField === "createdOn") {
            params.createdOnFrom = dates[0];
            params.createdOnTo = dates[1];
          }
          if (this.timeField === "shootTime") {
            params.shootTimeOnFrom = dates[0];
            params.shootTimeOnTo = dates[1];
          }
          if (this.timeField === "activityTime") {
            params.activityTimeOnFrom = dates[0];
            params.activityTimeOnTo = dates[1]; //
          }
        }
        //区域筛选条件
        if (this.selectedFolderIdList.length > 0) {
          params.folderIds = this.selectedFolderIdList.toString();
        }
        //标签筛选条件
        if (this.selectedTags.length > 0) {
          params.businessTags = this.selectedTags.toString();
        }

        var np = new Promise((resolve, reject) => {
          this.getFileList(params, this.showMonthList[i], resolve, params.page);
        });
        p.push(np);
      }
      Promise.all(p).then((res) => {
        //多次异步调用返回结果的顺序处理
        res.forEach((data) => {
          this.monthsObjsArr.push(data);
        });
      });
      if (ismore == 0 && this.monthsObjsArr.length == 6) {
        let obj2 = {};
        let res2 = [];
        res2 = this.monthsObjsArr.reduce((prev, item) => {
          obj2[item.yearMonth]
            ? ""
            : (obj2[item.yearMonth] = true && prev.push(item));
          return prev;
        }, []);
        this.monthsObjsArr = res2;
      }
      if (ismore == 0 && this.monthsObjsArr.length == 4) {
        let obj2 = {};
        let res2 = [];
        res2 = this.monthsObjsArr.reduce((prev, item) => {
          obj2[item.yearMonth]
            ? ""
            : (obj2[item.yearMonth] = true && prev.push(item));
          return prev;
        }, []);
        this.monthsObjsArr = res2;
      }
      if (ismore == 0 && this.monthsObjsArr.length == 2) {
        let obj2 = {};
        let res2 = [];
        res2 = this.monthsObjsArr.reduce((prev, item) => {
          obj2[item.yearMonth]
            ? ""
            : (obj2[item.yearMonth] = true && prev.push(item));
          return prev;
        }, []);
        this.monthsObjsArr = res2;
      }
      this.monthMore = ismore + 3;
    },

    //获取指定月份的文件列表
    getFileList(params, yearMonth, resolve, next) {
      var monthObj = { yearMonth: "", page: "", items: [], isMore: "" };
      monthObj.yearMonth = yearMonth;
      monthObj.page = next;
      fileList(params).then((res) => {
        // 判断当月图片数据多少显示更多...
        if (res.page * 20 - 1 >= res.total) {
          monthObj.isMore = true;
        } else {
          monthObj.isMore = false;
        }
        if (res.code == 0) {
          res.data.forEach((item) => {
            monthObj.items.push(item);
          });
          return resolve(monthObj);
        }
      });
    },
    // 月份数据滚动加载
    monthMoreLoad() {
      this.getIconData(this.monthMore);
    },
    minMonthloading() {
      this.getMinData(this.monthMore);
    },

    //翻页加载更多单个月的数据
    loadsingleMonthMore(monthDatas) {
      let params = {};
      params.size = 20;
      params.orderMode = 1;
      params.sortBy = "createdOn";
      params.page = monthDatas.page + 1;
      // params.sortBy = this.timeField;
      params.timeField = this.timeField;
      params.mediaType = this.mediaType;
      params.sortMode = 0;
      var dates = getMonthStartAndEnd(
        monthDatas.yearMonth,
        "yyyy-MM-dd hh:mm:ss"
      );
      if (dates) {
        if (this.timeField === "createdOn") {
          params.createdOnFrom = dates[0];
          params.createdOnTo = dates[1];
        }
        if (this.timeField === "shootTime") {
          params.shootTimeOnFrom = dates[0];
          params.shootTimeOnTo = dates[1];
        }
        if (this.timeField === "activityTime") {
          params.activityTimeOnFrom = dates[0];
          params.activityTimeOnTo = dates[1];
        }
      }
      //区域筛选条件
      if (this.selectedFolderIdList.length > 0) {
        params.folderIds = this.selectedFolderIdList.toString();
      }
      //标签筛选条件
      if (this.selectedTags.length > 0) {
        params.businessTags = this.selectedTags.toString();
      }
      if (this.switchValue == true) {
        params.belong = "person";
      }
      monthDatas.page = params.page;
      setTimeout(() => {
        fileList(params).then((res) => {
          if (res.code == 0) {
            // 判断当月图片数据多少显示更多...
            if (res.page * 20 - 1 >= res.total) {
              monthDatas.isMore = true;
            } else {
              monthDatas.isMore = false;
            }
            res.data.forEach((item) => {
              monthDatas.items.push(item);
            });
          }
        });
      }, 60);
    },
    // 获取表格类型数据
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getTableData();
    },
    getTableData() {
      let params = {};
      params.page = this.currentPage;
      params.size = this.pageSize;
      params.sortBy = this.timeField;
      params.timeField = this.timeField;
      params.mediaType = this.mediaType;
      params.sortMode = 0;
      //区域筛选条件
      if (this.selectedFolderIdList.length > 0) {
        params.folderIds = this.selectedFolderIdList.toString();
      }
      //标签筛选条件
      if (this.selectedTags.length > 0) {
        params.businessTags = this.selectedTags.toString();
      }
      //年份筛选条件
      if (this.selectedYearList.length > 0) {
        params.years = this.selectedYearList.toString();
      }
      if (this.switchValue == true) {
        params.belong = "person";
      }
      fileList(params).then((res) => {
        this.tableList = res.data;
        this.tableList.forEach((el) => {
          el.checked = false;
        });
        this.totalCount = res.total;
        this.PageSize = res.size;
      });
    },
    // 确认移入回收站
    movescrapHandle() {
      this.centerDialogVisible = true;
    },
    getscrapHandle() {
      this.viewList = [];
      this.tipsDialogVisible = true;
    },
    // 下载链接——处理
    getdownUrlhandle() {
      if (this.selecMonthl.length > 0) {
        let arr = [];
        this.selecMonthl.forEach((el) => {
          arr.push(el.id);
        });
        let arr1 = arr.toString();
        getDownloadLinkData({ ids: arr1 }).then((res) => {
          if (res.code == 0) {
            res.data.forEach((el) => {
              const name = el.description
                ? el.description.split(".").shift() + "." + el.suffix
                : el.fileName;
              const fileType = "IMAGE";
              const downloadUrl =
                this.$GLOBALVAR.locationProtocol +
                el.downloadUrl.slice(el.downloadUrl.indexOf("//"));
              commonDownloadSave(downloadUrl, name, fileType);
              this.selecMonthl.forEach((item) => {
                this.selecMonthl = [];
                item.checked = false;
                if (this.MenulistType == "table") {
                  this.checkBoxAll = false;
                }
                this.monthsObjsArr.forEach((el) => {
                  el.checked = false;
                });
              });
            });
          } else {
            this.$message({
              message: res.message,
              type: "error",
            });
          }
        });
      }
      this.mediaPreview = false;
    },
    // 批量勾选移入回收站
    scrapHandle() {
      if (this.selecMonthl.length > 0) {
        let arr = [];
        this.selecMonthl.forEach((el) => {
          arr.push(el.id);
        });
        let arr1 = arr.toString();
        scrapFile({ ids: arr1 }).then((res) => {
          if (res.code == 0) {
            this.$message({ message: "删除成功", type: "success" });
            this.selecMonthl = [];
            this.tipsDialogVisible = false;
            if (this.MenulistType == "icon" || this.MenulistType == "min") {
              this.getIconData(0);
              this.selecMonthl = [];
            }
            // 表格移入回收站
            if (this.MenulistType == "table") {
              this.getTableData();
              this.checkBoxAll = false;
            }
          }
        });
      }
    },
    deleteHandle() {
      let id = this.selectImages.id ? this.selectImages.id : this.deleteId;
      scrapFile({ ids: id }).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: "删除成功",
            type: "error",
          });
          if (this.MenulistType == "icon") {
            this.getIconData(0);
            this.centerDialogVisible = false;
            this.mediaPreview = false;
          }
          if (this.MenulistType == "min") {
            this.getMinData(0);
            this.centerDialogVisible = false;
            this.MiniImageArr = [];
            this.mediaPreview = false;
          } else {
            this.getTableData();
            this.centerDialogVisible = false;
            this.mediaPreview = false;
          }
        }
      });
    },

    //获取筛选子组件传递出来的条件
    filterConditionHandle(data) {
      //[this.selectedTags,this.selectedFolderAreas,this.selectedYearList,this.showMonthList];
      this.selectedTags = data[0];
      this.selectedFolderIdList = data[1];
      this.selectedYearList = data[2];
      this.showMonthList = data[3];
    },

    iscollapseHandle(iscollapse) {
      this.thisListBolean = iscollapse;
      if (iscollapse == true) {
        let obj = document.getElementById("timerlinser");
        let height = this.$refs.imageTop.$el.offsetHeight;
        obj.style.marginTop = height + "px";
      }
      if (iscollapse == false) {
        let obj = document.getElementById("timerlinser");
        let height = this.$refs.imageTop.$el.offsetHeight;
        obj.style.marginTop = this.$refs.imageTop.$el.offsetHeight + "px";
      }
    },
    //切换显示模式
    changeDisplayType($type) {
      this.$store.commit("MENU_TYPE", $type);
      if ($type == "table") {
        this.getTableData(1);
        if (this.thisListBolean == true) {
          // let obj2 = document.getElementById("selectPictableId");
          // let obj1 = document.getElementById("table-mode-Top");
          // obj1.style.marginTop = "178px";
          // obj2.style.marginTop = "10px";
          // obj2.style.paddingTop = "70px";
        }
        this.selecMonthl = [];
      }
      if ($type == "min") {
        this.getMinData(0);
        this.selecMonthl = [];
      }
      if ($type == "icon") {
        this.getIconData(0);
        this.selecMonthl = [];
      }
    },
    handleDrop($item) {
      if (
        this.tableList.every(
          (item) => !item.hasOwnProperty("edit") || !item.edit
        )
      ) {
        this.selectMedia = JSON.parse(JSON.stringify($item));
      }
    },
    // 移入回收站
    previewVisibleHandle() {
      this.previewVisibleArr = [];
      this.previewVisible = false;
    },
    refresHandle() {
      this.previewVisible = false;
      this.getIconData(0);
    },
    // 点击3个月份的资料
    monthsObjsArrHandle(item, monthsObjsArr) {
      this.$store.commit("SET_ISSHOWVIEW", true);
      item.items.forEach((el) => {
        if (this.nowSelect.url == el.url) {
          this.srcList.push(el.url);
          this.viewList.push(this.nowSelect);
        }
      });
      // item.items.forEach((el) => {
      //   if (this.viewList.length < 10) {
      //     this.viewList.push(el);
      //   }
      // });
      monthsObjsArr.forEach((item) => {
        if (item.items.length > 0) {
          item.items.forEach((el) => {
            if (this.viewList.length < 30) {
              this.viewList.push(el);
            }
          });
        }
      });
      let obj2 = {};
      let res2 = [];
      res2 = this.viewList.reduce((prev, item) => {
        obj2[item.id] ? "" : (obj2[item.id] = true && prev.push(item));
        return prev;
      }, []);
      this.viewList = res2;
    },
    getpicdetails(item) {
      (this.showViewer = true), (this.nowSelect = item);
      this.monthsObjsArr.forEach((item) => {
        item.items.forEach((el) => {
          this.previewVisibleArr.push(el);
        });
      });
      this.previewVisible = true;
      (this.selectImages.url = item.url),
        (this.selectImages.description = item.description),
        (this.selectImages.photographer = item.photographer),
        (this.selectImages.businessTags = item.businessTags),
        (this.selectImages.fileName = item.fileName),
        // 下载
        (this.selectImages.downloadUrl = item.downloadUrl),
        (this.selectImages.width = item.width),
        (this.selectImages.height = item.height),
        (this.selectImages.createdOn = item.createdOn),
        (this.selectImages.height = item.height),
        (this.selectImages.fileSize = item.fileSize);
      this.selectImages.activityTime = item.activityTime;
      this.selectImages.id = item.id;
      this.selectImages.mediaType = item.mediaType;
    },
    selectbox(item) {
      // item.checked=!item.checked
    },
    Checkboxgroup(item) {
      if (item.checked) {
        // item.checked = true
        this.selecMonthl.push(item);
      }
      this.selecMonthl = this.selecMonthl.filter((item) => {
        return item.checked != false;
      });
    },
    selectAllHandle(item) {
      if (item == true) {
        this.tableList.forEach((item) => {
          item.checked = true;
          this.selecChecklist.push(item);
        });
      }
      if (item == false) {
        this.tableList.forEach((item) => {
          item.checked = false;
          this.selecChecklist.push(item);
        });
      }
      let obj2 = {};
      let res2 = [];
      res2 = this.selecChecklist.reduce((prev, item) => {
        obj2[item.id] ? "" : (obj2[item.id] = true && prev.push(item));
        return prev;
      }, []);
      this.selecMonthl = res2.filter((item) => {
        return item.checked != false;
      });
    },
    monthimgsHandle(monthimgs) {
      if (monthimgs.checked == true) {
        monthimgs.items.forEach((el) => {
          el.checked = true;
          this.selecChecklist.push(el);
        });
      }
      if (monthimgs.checked == false) {
        monthimgs.items.forEach((el) => {
          el.checked = false;
          this.selecChecklist.push(el);
        });
      }
      let obj2 = {};
      let res2 = [];
      // let res3 = []
      res2 = this.selecChecklist.reduce((prev, item) => {
        obj2[item.id] ? "" : (obj2[item.id] = true && prev.push(item));
        return prev;
      }, []);
      this.selecMonthl = res2.filter((item) => {
        return item.checked != false;
      });
    },
    loadingTree() {},
    // 弹出框关闭
    closePreview() {
      this.mediaPreview = false;
      this.isEdit = false;
    },
    handleImages(command, item) {
      this.selectImages.id = command.id;
      switch (command) {
        case "pushtag":
          if (this.MenulistType == "min") {
            this.mediaPreviewTag = true;
            this.selectMedia = this.MiniImageArr;
          } else {
            this.mediaPreviewTag = true;
            this.selectMedia = item;
          }

          break;
        case "delete":
          if (this.MenulistType == "min") {
            this.centerDialogVisible = true;
            this.deleteId = this.MiniImageArr.id;
          } else {
            this.centerDialogVisible = true;
            this.deleteId = item.id;
          }
          break;
        case "download":
          if (this.MenulistType == "min") {
            getDownloadLinkData({ ids: this.MiniImageArr.id }).then((res) => {
              if (res.code == 0) {
                res.data.forEach((el) => {
                  const name = el.description
                    ? el.description.split(".").shift() + "." + el.suffix
                    : el.fileName;
                  const fileType = "IMAGE";
                  const downloadUrl =
                    this.$GLOBALVAR.locationProtocol +
                    el.downloadUrl.slice(el.downloadUrl.indexOf("//"));
                  commonDownloadSave(downloadUrl, name, fileType);
                });
              } else {
                this.$message({
                  message: res.message,
                  type: "error",
                });
              }
            });
          } else {
            getDownloadLinkData({ ids: item.id }).then((res) => {
              if (res.code == 0) {
                res.data.forEach((el) => {
                  const name = el.description
                    ? el.description.split(".").shift() + "." + el.suffix
                    : el.fileName;
                  const fileType = "IMAGE";
                  const downloadUrl =
                    this.$GLOBALVAR.locationProtocol +
                    el.downloadUrl.slice(el.downloadUrl.indexOf("//"));
                  commonDownloadSave(downloadUrl, name, fileType);
                });
              } else {
                this.$message({
                  message: res.message,
                  type: "error",
                });
              }
            });
          }
          break;
        case "preview-detail":
          if (this.MenulistType == "min") {
            this.getpicdetails(this.MiniImageArr);
          } else {
            this.cliclTableHandle(item);
          }
          break;
      }
    },
    closePreviewTag() {
      this.mediaPreviewTag = false;
    },
    handleCloseAll() {
      this.formdate.businessTags = [];
      this.$refs.tree.setCheckedKeys([]);
    },
    handleClose(key) {
      if (this.$refs.tree) {
        this.$refs.tree.setChecked(key, false, true);
        let checkNodes = [];
        this.$nextTick(() => {
          checkNodes = this.$refs.tree.getCheckedNodes(false, true);
          this.formdate.businessTags = checkNodes.filter(
            (el) => el.level != 0 && el.level != 1
          );
        });
      }
    },
  },

  watch: {
    screenWidth(val) {
      this.screenWidth = val;
      console.log("this.screenWidth", this.screenWidth);
    },

    showViewer: function () {
      if (this.showViewer == true) {
        if (this.MenulistType === "table") {
          let warpButton = document.querySelector(".Img_ul");
          warpButton.style.transform = "translateX(30%)";
        }
      } else {
        let warpButton = document.querySelector(".Img_ul");
        warpButton.style.transform = "translateX(0%)";
      }
    },
    showViewer: function () {
      if (this.showViewer == false) {
        if (this.isSuccess == true) {
          this.getIconData(0);
        }
      }
    },
    mediaPreviewTag: function () {
      this.$nextTick(() => {
        if (this.mediaPreviewTag == true) {
          let warpMyicon1 = document.querySelector(".el-image-viewer__actions");
          warpMyicon1.style.display = "none";
          if (this.viewList.length > 1) {
            let warp = document.querySelector(".imageView_right");
            let warp1 = document.querySelector(".imageView_left");
            warp.style.zIndex = 1999;
            warp1.style.zIndex = 1999;
          }
        }
        if (this.mediaPreviewTag == false) {
          let warpMyicon1 = document.querySelector(".el-image-viewer__actions");
          warpMyicon1.style.display = "inherit";
          if (this.viewList.length > 1) {
            let warp1 = document.querySelector(".imageView_left");
            let warp = document.querySelector(".imageView_right");
            warp.style.zIndex = 2999;
            warp1.style.zIndex = 2999;
          }
        }
      });
    },
    // 监听权限
    // 局部更新视图处理
    isRefresh: function () {
      if (this.isRefresh == true) {
        this.viewList.forEach((item, index) => {
          if (index == this.imgActiveIndex) {
            getDetailfile({ resId: this.viewList[index].id }).then((res) => {
              if (res.code == 0) {
                this.shortTimeObj = res.data;
                this.$nextTick(() => {
                  this.monthsObjsArr.forEach((el) => {
                    if (this.shortTimeObj.activityTime == el.yearMonth) {
                      el.items.forEach((item) => {
                        if (item.id == this.shortTimeObj.id) {
                          this.$set(
                            item,
                            "createdBy",
                            this.shortTimeObj.createdBy
                          );
                          this.$set(
                            item,
                            "photographer",
                            this.shortTimeObj.photographer
                          );
                          this.$set(
                            item,
                            "activityTime",
                            this.shortTimeObj.activityTime
                          );
                          this.$set(
                            item,
                            "businessTags",
                            this.shortTimeObj.businessTags
                          );
                          this.$set(
                            item,
                            "generalTags",
                            this.shortTimeObj.generalTags
                          );
                          this.$set(
                            item,
                            "description",
                            this.shortTimeObj.description
                          );
                        }
                      });
                    }
                  });
                });
              }
            });
            this.$store.commit("SET_IREFRESH", false);
          }
        });
      }
    },
    myAuthorities: function () {
      this.authorities = this.myAuthorities
        ? JSON.parse(this.myAuthorities)
        : {};
    },
    showMonthList: function (val, oldVal) {
      if (this.MenulistType == "icon") {
        this.getIconData(0);
      }
      if (this.MenulistType == "min") {
        this.getIconData(0);
      }
      if (this.MenulistType == "table") {
        this.getTableData(1);
      }
    },
    bottomList: function () {
      if (this.bottomList == true) {
        console.log(this.bottomList, "this.bottomList");
        let warpIcon = document.querySelector(".el-image-viewer__actions");
        let warpHeight = document.querySelector(".el-image-viewer__canvas");
        warpIcon.style.bottom = "60px";
        warpHeight.style.height = "90%";
      }
      if (this.bottomList == false) {
        let warpIcon = document.querySelector(".el-image-viewer__actions");
        let warpHeight = document.querySelector(".el-image-viewer__canvas");
        warpHeight.style.height = "100%";
        warpIcon.style.bottom = "0px";
      }
    },
    isShow: function () {
      if (this.isShow == true) {
        let warp = document.querySelector(".el-image-viewer__canvas");
        let warpIcon = document.querySelector(".el-image-viewer__actions");
        if (this.MenulistType === "table") {
          let warpButton = document.querySelector(".Img_ul");
          warpButton.style.transform = "translateX(20%)";
        }
        warp.style.width = "80%";
        if (this.viewList.length > 1) {
          let warpright = document.querySelector(".imageView_right");
          warpright.style.right = "30%";
        }
        warpIcon.style.transform = "translateX(-60%)";
      }
      if (this.isShow == false) {
        if (this.MenulistType === "table") {
          let warpButton = document.querySelector(".Img_ul");
          warpButton.style.transform = "translateX(30%)";
        }
        if (this.viewList.length > 1) {
          let warpright = document.querySelector(".imageView_right");
          warpright.style.right = "10%";
        }
        let warp = document.querySelector(".el-image-viewer__canvas");
        let warpIcon = document.querySelector(".el-image-viewer__actions");
        warp.style.width = "100%";
        warpIcon.style.transform = "translateX(-50%)";
      }
    },
    isShowOcr: function () {
      if (this.isShowOcr == true) {
        if (this.MenulistType === "table") {
          let warpButton = document.querySelector(".Img_ul");
          warpButton.style.transform = "translateX(20%)";
        }
        let warp = document.querySelector(".el-image-viewer__canvas");
        let warpIcon = document.querySelector(".el-image-viewer__actions");
        warp.style.width = "80%";
        if (this.viewList.length > 1) {
          let warpright = document.querySelector(".imageView_right");
          warpright.style.right = "30%";
        }
        warpIcon.style.transform = "translateX(-60%)";
      }
      if (this.isShowOcr == false) {
        if (this.MenulistType === "table") {
          let warpButton = document.querySelector(".Img_ul");
          warpButton.style.transform = "translateX(30%)";
        }
        if (this.viewList.length > 1) {
          let warpright = document.querySelector(".imageView_right");
          warpright.style.right = "10%";
        }
        let warp = document.querySelector(".el-image-viewer__canvas");
        let warpIcon = document.querySelector(".el-image-viewer__actions");
        warp.style.width = "100%";
        warpIcon.style.transform = "translateX(-50%)";
      }
    },
    isShowImageApi: function () {
      if (this.isShowImageApi == true) {
        if (this.MenulistType === "table") {
          let warpButton = document.querySelector(".Img_ul");
          warpButton.style.transform = "translateX(20%)";
        }
        let warp = document.querySelector(".el-image-viewer__canvas");
        let warpIcon = document.querySelector(".el-image-viewer__actions");
        warp.style.width = "80%";
        if (this.viewList.length > 1) {
          let warpright = document.querySelector(".imageView_right");
          warpright.style.right = "30%";
        }
        warpIcon.style.transform = "translateX(-60%)";
      }
      if (this.isShowImageApi == false) {
        if (this.MenulistType === "table") {
          let warpButton = document.querySelector(".Img_ul");
          warpButton.style.transform = "translateX(30%)";
        }
        if (this.viewList.length > 1) {
          let warpright = document.querySelector(".imageView_right");
          warpright.style.right = "10%";
        }
        let warp = document.querySelector(".el-image-viewer__canvas");
        let warpIcon = document.querySelector(".el-image-viewer__actions");
        warp.style.width = "100%";
        warpIcon.style.transform = "translateX(-50%)";
      }
    },
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        that.screenWidth = window.screenWidth;
      })();
    };
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/style/theme/register.scss";
@import "@/assets/style/resourceCenter/common.scss";
.imagesResource {
  .viewer_image {
    z-index: 2399;
    width: 48px;
    height: 48px;
    background: #1c1c1c;
    border-radius: 50%;
    opacity: 1;
    cursor: pointer;
    font-size: 36px;
    color: #ffff;
    i {
      position: absolute;
      // top: 4px;
      &:last-child {
        // right: 2px;
      }
    }
    &:hover {
      background: #4b4b4b;
    }
  }
  .imageView_right {
    // animation: slideInRight; /* referring directly to the animation's @keyframe declaration */
    // animation-duration: 1.2s !important; /* don't forget to set a duration! */
    cursor: pointer;
    position: fixed;
    right: 10%;
    top: 50%;
    .el-icon-arrow-right {
      top: 50%;
      left: 9px;
      margin-top: -18px;
    }
  }
  .imageView_left {
    cursor: pointer;
    position: fixed;
    left: 10%;
    top: 50%;
    .el-icon-arrow-left {
      top: 50%;
      margin-top: -18px;
      right: 8px;
    }
  }
  .imageView_bottom {
    z-index: 2015;
    display: flex;
    position: fixed;
    left: 50%;
    bottom: 132px;
    transform: translateX(-50%);
    width: 440px;
    height: 40px;
    padding: 0 23px;
    border-color: #fff;
    border-radius: 22px;
    margin-left: 172px;
    .tool {
      display: flex;
      .icon,
      .iconeidt,
      .iconxqing,
      .icondelt {
        cursor: pointer;
        margin: 2px 10px;
        width: 36px;
        height: 36px;
        width: 100%;
        font-size: 34px;
        color: #fff;
        font-family: element-icons !important;
        speak: none;
        font-style: normal;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        // line-height: 1;
        vertical-align: baseline;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
      }
      .iconeidt,
      .iconxqing,
      .icondelt {
        cursor: pointer;
      }
      .foldCalss {
        width: 36px;
        height: 36px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .isShowicon {
        transform: scale(0.9);
      }
    }
  }
  .modele-detail {
    animation: slideInRight; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 1.2s; /* don't forget to set a duration! */
    width: 20%;
    height: 100%;
    background: #191919;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2999;
    .detail {
      margin-top: 30px;
      margin-left: 30px;

      .fileDetail {
        font-size: 16px;
        color: #ffffff;
        letter-spacing: 0;
        font-weight: 600;
        min-width: 50px;
      }
      .title {
        color: #fff;
        margin: 30px;
        position: relative;
        span {
          &:nth-child(1) {
            color: #fff;
          }

          font-size: 18px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #fff;
          line-height: 25px;
          padding-bottom: 20px;
          display: block;
          word-break: break-all;
          &:last-child {
            position: absolute;
          }
        }
        .divColse {
          position: absolute;
          width: 45px;
          height: 34px;
          color: #fff;
          border-radius: 5px;
          display: block;
          margin-left: 325px;
          cursor: pointer;
          top: -50px;
          right: 10px;
          .icon {
            color: #fff;
            margin-left: 35%;
            margin-top: 10px;
          }
        }
      }
      .body {
        margin-top: 40px;
        position: relative;
        h3 {
          margin-bottom: 10px;
          color: #000;
        }
        span {
          display: inline-block;
          margin-bottom: 10px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #fff;
          line-height: 22px;
        }
        .edit {
          position: absolute;
          width: 45px;
          height: 34px;
          background: #d8d8d8;
          border-radius: 5px;
          display: block;
          margin-left: 325px;
          cursor: pointer;
          top: -10px;
          right: 10px;
          .icon {
            line-height: 34px;
            margin-left: 14px;
          }
        }
        div {
          display: flex;
          margin: 20px 0px;
          .spanFirst {
            font-size: 12px;
            color: #ffffff;
            letter-spacing: 0;
            font-weight: 600;
            display: inline-block;
            margin-right: 15px;
            min-width: 70px;
          }
          .secondSpan {
            font-size: 12px;
            color: #999999;
            letter-spacing: 0;
            font-weight: 400;
            display: inline-block;
            width: 155px;
            word-wrap: break-word;
            word-break: normal;
          }
        }
      }
      .tag {
        .tag_title {
          display: block;
          margin-bottom: 10px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 22px;
        }
        .infotag-tag {
          display: inherit;
          margin-bottom: 15px;
          margin-left: 84px;
          margin-top: -27px;
          max-height: 450px;
          overflow-y: auto;
          .infoTag {
            display: inline-block;
            background: #666666;
            border-radius: 13px;
            font-size: 12px;
            color: #ffffff;
            letter-spacing: 0;
            text-align: center;
            font-weight: 400;
            height: 26px;
            line-height: 26px;
            padding: 0 13px;
            cursor: pointer;
            user-select: none;
            margin: 0px 5px 5px 0px;
          }
        }
        ::-webkit-scrollbar {
          width: 6px;
          height: 6px;
          background-color: rgba(240, 240, 240, 1);
        }
        /*定义滚动条轨道 内阴影+圆角*/
        ::-webkit-scrollbar-track {
          box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
          border-radius: 10px;
          background-color: rgba(240, 240, 240, 0.5);
        }
        /*定义滑块 内阴影+圆角*/
        ::-webkit-scrollbar-thumb {
          border-radius: 10px;
          box-shadow: inset 0 0 0px rgba(105, 103, 103, 0.5);
          background-color: #636766;
        }
      }
      .natrue {
        padding-bottom: 15px;
        margin-top: 25px;
        width: 350px;
        margin: 10px auto;
        height: 190px;
        h4 {
          height: 55px;
          line-height: 55px;
          font-size: 16px;
          color: #333333;
          padding: 0 10px;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          border: 0.5px solid #eeeff2;
          margin-bottom: 15px;
        }
        p {
          height: 24px;
          line-height: 24px;
          color: #636363;
          font-size: 14px;
          padding: 0 10px;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          .info-left {
            float: left;
          }
          .info-right {
            float: right;
          }
        }
      }
    }
  }
  .modele-Orchid {
    animation: slideInRight; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 1.2s; /* don't forget to set a duration! */
    width: 20%;
    height: 100%;
    background: #191919;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2999;
    .detail_Ocr {
      .topOcr {
        margin: 10px;
        margin-top: 20px;
        position: relative;
        .spanCalss {
          position: absolute;
          right: 0;
          padding: 8px;
          top: 0;
          cursor: pointer;
        }
        .functional_btn {
          display: inline-block;
          width: 80px;
          height: 30px;
          margin-right: 5px;
          line-height: 30px;
          background-color: #e1ecf8;
          font-size: 12px;
          color: #007afb;
          cursor: pointer;
          text-align: center;
        }
        .active {
          background: #016de9;
          color: #ffffff;
        }
      }
      .functional_body {
        .functional {
          padding: 10px;
          .voiceCalss {
            height: 78vh;
            .getread_li {
              box-sizing: border-box;
              margin-left: 20px;
              margin-right: 20px;
              cursor: pointer;
              .getready_tit {
                padding-top: 10px;
                span {
                  &:first-child {
                    font-size: 16px;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 22px;
                    margin-right: 10px;
                    padding-left: 6px;
                  }
                  &:last-child {
                    font-size: 16px;
                    font-weight: 400;
                    color: #999999;
                    // color: #8c8c8c;
                    line-height: 22px;
                    margin-left: 7px;
                  }
                }
              }
              .getready_body {
                span {
                  margin-left: 37px;
                  display: inline-block;
                  margin-top: 8px;
                  line-height: 24px;
                  overflow: hidden;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  text-overflow: ellipsis;
                  font-size: 16px;
                }
              }
            }
          }
          .voice_Calss {
            position: absolute;
            top: 80px;
            left: 20px;
            color: #999999;
          }
        }
        .functional_characters {
          padding-left: 20px;
          .el-scrollbar {
            height: 83vh !important;
          }
          .charactersCalss {
            li {
              cursor: pointer;
              display: flex;
              font-size: 16px;
              padding: 10px;
              color: #ffffff;
              margin-right: 10px;
              .itemTime {
                margin-right: 17px;
              }
              .itemIndex {
                .itemBody {
                }
              }
            }
          }
          .characters_Calss {
            position: absolute;
            top: 16px;
            left: 0px;
            color: #999999;
          }
        }
        .functional_face {
          .faceCalss {
            li {
              margin-left: 10px;
              display: flex;
              padding: 10px;
              margin-bottom: 10px;
              font-size: 16px;
              div {
                margin-right: 20px;
              }
              span {
                margin-right: 10px;
              }
            }
          }
          .face {
            position: absolute;
            top: 80px;
            left: 20px;
          }
        }
        .functional_scene {
          .sceneItem {
            margin-left: 20px;
            margin-bottom: 10px;
            padding: 10px;
            font-size: 16px;
            cursor: pointer;
          }
          .scene {
            position: absolute;
            top: 80px;
            left: 20px;
          }
        }
      }
    }
  }
  .modele-Image {
    animation: slideInRight; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 1.2s; /* don't forget to set a duration! */
    width: 20%;
    height: 100%;
    background: #f5f6fd;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2999;
    .isShowImage {
      .divColse {
        position: absolute;
        right: 30px;
        top: 0px;
        padding: 10px;
        font-size: 16px;
        cursor: pointer;
      }
      .showImage_list {
        display: flex;
        flex-flow: wrap;
        padding: 30px 10px 10px 10px;
        .list {
          width: 48%;
          cursor: pointer;
          box-shadow: 0 2px 20px ragb(0 0 0 / 10%);
          margin-right: 4%;
          margin-bottom: 10px;
          width: 140px;
          height: 180px;
          border-radius: 5px;
          background: #fff;
          &:nth-child(2n) {
            margin-right: 0%;
          }
          .list_detail {
          }
          .list_img {
            height: 120px;
            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
        }
      }
    }
  }
  .View {
    animation: slideInUp; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 0.4s; /* don't forget to set a duration! */
    height: 60px;
    background: #202020;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 2021;
    padding-bottom: 8px;
    .Img_ul {
      position: relative;
      display: flex;
      overflow: hidden;
      list-style: none;
    }
    .Img_li {
      float: left;
      margin: 0 8px;
      cursor: pointer;
      width: 64px;
      height: 64px;
      box-sizing: border-box;
      img {
        padding: 1px;
        object-fit: contain;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      &:hover {
        opacity: 0.9;
      }
    }
    .img_activeBorder {
      border: 2px solid #ffffff;
    }
    .swiper_active {
      opacity: 0.6;
    }
  }
  .imageView_swiper {
    width: 100%;
    height: 80px;
    background: #000;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 2199;
    .w {
      display: flex;
      justify-content: center;
    }

    .swiper {
      overflow: hidden;
      .swiper_hide {
        justify-content: center;
        display: flex;
      }
      .swiper_img {
        opacity: 0.6;
        display: flex;
        width: 80px;
        height: 80px;
        // margin: 0px 4px;
        .img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
      .viewClass {
        opacity: 1;
      }
    }
  }
  display: flex;
  flex-direction: column;
  .image_min {
    height: 700px;
    /* 定义滚动条样式 */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
      background-color: rgba(240, 240, 240, 1);
    }

    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track {
      box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
      border-radius: 10px;
      background-color: rgba(240, 240, 240, 0.5);
    }

    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      box-shadow: inset 0 0 0px rgba(105, 103, 103, 0.5);
      background-color: rgba(83, 80, 80, 0.5);
    }
    .minicon_body {
      display: flex;
      margin-top: 50px;
      height: 600px;
      overflow: hidden;
      .minicon_left {
        float: left;
        border: 1px solid #ffffff;
        width: calc(100vw - 587px);
        position: fixed;
        margin-left: 20px;
        margin-right: 20px;
        height: 700px;
        overflow: scroll;
        .minicon_top {
          .minicon_ul {
            margin-bottom: 50px;
            &:last-child {
              margin-bottom: 200px;
            }
            .checkoutMontn {
              height: 22px;
              margin-top: 20px;
              /deep/ .timer_check {
                .el-checkbox__inner {
                  top: -4px;
                  left: 11px;
                  width: 20px;
                  height: 20px;
                }
                .el-checkbox__label {
                  width: 100px;
                  font-size: 22px;
                  height: 22px;
                  font-family: "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1",
                    "Helvetica Neue", Helvetica, "PingFang SC",
                    "Hiragino Sans GB", Arial, sans-serif;
                  line-height: 10px;
                  margin-left: 10px;
                  font-weight: 600;
                  color: #262626;
                }
              }
            }

            li {
              box-sizing: border-box;
              width: 140px;
              height: 140px;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              list-style: none;
              margin: 0px 7px 10px 0px;
              float: left;
              position: relative;
              border-radius: 5px;
              &:hover {
                background: #ffffff;
                box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
                border-radius: 5px;
              }

              .img {
                width: 60px;
                height: 60px;
                img {
                  height: 100%;
                  width: 100%;
                }
              }
              .fileName {
                width: 120px;
                height: 22px;
                font-size: 16px;
                font-weight: 400;
                color: #262626;
                line-height: 22px;
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: center;
                position: absolute;
                bottom: 10px;
                margin: 0px 10px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                cursor: pointer;
              }
              .check {
                position: absolute;
                top: 10px;
                left: 10px;
                .el-checkbox__inner {
                  width: 20px;
                  height: 20px;
                }
              }
            }
            .selectMinmore {
              display: flex;
              justify-content: flex-end;
              align-items: end;
              float: left;
              width: 140px;
              height: 140px;
              position: relative;
              button {
                position: absolute;
                top: 40px;
                border: none;
                cursor: pointer;
                padding: 5px;
                border-radius: 5px;
                left: 0px;
              }
            }
            .activeList {
              background: #ffffff;
              border-radius: 5px;
              border: 2px solid #0166cc;
            }
          }
        }
      }
      .minicon_right {
        position: fixed;
        width: 320px;
        background: #f5f6fa;
        right: 0;
        height: 700px;
        margin-right: 20px;
        .right_tip {
          position: relative;
          .tip {
            width: 280px;
            height: 25px;
            font-size: 18px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: bold;
            color: #262626;
            line-height: 25px;
            margin: 20px;
          }
          .MiniMorehand {
            position: absolute;
            top: 0px;
            right: 20px;
          }
        }
        .right_image {
          width: 280px;
          height: 148px;
          margin: 0px 20px 10px 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .right_content {
          .content {
            height: 80px;
            overflow: scroll;
            margin-bottom: 15px;
            text-indent: 20px;
            padding: 5px;
            span {
              width: 280px;
              height: 55px;
              font-size: 18px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: bold;
              color: #262626;
              line-height: 25px;
              flex-wrap: wrap;
              word-wrap: break-word;
              word-break: normal;
            }
          }
          .content_list {
            display: flex;
            flex-direction: column;
            margin-bottom: 30px;
            p {
              margin-top: 10px;
              font-size: 16px;
              font-weight: 400;
              color: #8c8c8c;
              line-height: 22px;
            }
          }
          .content_tag {
            margin-top: 15px;
            .content_bottom {
              font-size: 16px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: bold;
              color: #262626;
              line-height: 22px;
              margin-bottom: 5px;
            }
            .content_tags {
              flex-wrap: wrap;
              display: flex;

              span {
                font-size: 16px;
                font-weight: 400;
                color: #262626;
                line-height: 22px;
                padding: 3px 2px;
                border-radius: 5px;
                border: 1px solid #d8d8d8;
                margin: 4px;
              }
            }
          }
          .content_bottom {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: bold;
            color: #262626;
            line-height: 22px;
            margin-bottom: 10px;
            margin-top: 10px;
          }
        }
        .minicon_show {
          height: 540px;
          .img {
            display: flex;
            flex-direction: column;
            width: 60px;
            margin: 225px auto 0px;
          }
          span {
            position: absolute;
            left: 50%;
            margin-left: -80px;
            margin-top: 20px;
            font-size: 19px;
          }
        }
      }
    }
  }
  .timerline {
    position: relative;
    margin-top: 81px;
    height: 630px;
    .selectPicbox {
      height: calc(100vh - 130px);
      background-color: #ffffff;
      overflow-y: auto;
      background: #f5f6fd;
      .submit-btn {
        position: absolute;
        top: 8px;
        left: 140px;
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #dcdfe6;
        color: #606266;
        -webkit-appearance: none;
        text-align: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        outline: 0;
        margin: 0;
        -webkit-transition: 0.1s;
        transition: 0.1s;
        font-weight: 500;
        padding: 7px 10px;
        font-size: 14px;
        border-radius: 10px;
        border: 1px solid #0066cc;
      }
      .selectItem {
        margin-top: 62px !important;
        position: relative;
        flex-direction: row;
        display: flex;
        box-sizing: border-box;
        flex-wrap: wrap;
        margin-bottom: 0px;
        background: #f5f6fd;
        margin-left: 30px;
        .selectMore {
          width: 312px;
          height: 128px;
          position: relative;
          margin: 20px 0px 0px 10px;
          button {
            border: none;
            font-size: 26px;
            border: 1;
            border-radius: 10px;
            border: none;
            position: absolute;
            top: 20px;
            margin-left: 18px;
            background: #f5f6fd;
          }
        }
        /deep/ .el-checkbox {
          position: absolute;
          top: -15px;
        }
        /deep/ .item_check {
          position: absolute;
          width: 20px;
          height: 20px;
          left: 10px;
          top: 10px;
          z-index: 19;
          /deep/ .el-checkbox__inner {
            top: -4px;
            left: 11px;
            width: 20px;
            height: 20px;
          }
          /deep/ .el-checkbox__label {
            width: 100px;
            font-size: 22px;
            height: 22px;
            font-family: "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1",
              "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
              Arial, sans-serif;
            line-height: 10px;
            margin-left: 10px;
            font-weight: 600;
            color: #262626;
          }
        }
        li {
          box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
          width: 312px;
          height: 312px;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          list-style: none;
          background: #ffffff;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          margin: 18px 5px 0px 10px;
          position: relative;
          background: #ffffff;
          border: 1px solid #eeeeee;
          &:hover .el-col-5 {
            background: #ffffff;
            border-radius: 5px;
            .el-icon-more {
              color: #0066cc;
              width: 100%;
            }
          }
          .timer_img {
            position: relative;
            width: 310px;
            height: 190px;
            overflow: hidden;
            &:hover .log_record {
              animation: moveFace 0.4s 1 forwards;
            }
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
            .log_record {
              display: flex;
              position: absolute;
              bottom: -34px;
              width: 312px;
              height: 34px;
              background: rgba(0, 0, 0, 0.5);
              box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
              .log_record1,
              .log_record2,
              .log_record3 {
                display: flex;
                position: relative;
                margin-right: 7px;
                .log {
                  margin-right: -5px;
                  img {
                    height: 36px;
                    width: 36px;
                    transform: scale(1.4);
                  }
                }

                .log_num {
                  color: #ffffff;
                  line-height: 31px;
                  font-size: 14px;
                  text-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
                  opacity: 0.95;
                }
              }
              .log_record1 {
                margin-left: 8px;
              }
              .log_record3 {
                .log {
                  img {
                    height: 38px;
                    width: 36px;
                  }
                }
              }
            }
          }
          .tooltip {
            width: 100%;
            height: 100%;
          }

          .timer_des {
            position: relative;
            width: 275px;
            height: 22px;
            font-size: 20px;
            font-weight: 400;
            color: #262626;
            line-height: 20px;
            text-shadow: 0px 2px 20px ragb(0 0 0 / 10%);
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            margin: 20px 17px 10px 20px;
            font-family: FangSong_GB2312;
            cursor: pointer;
          }

          .timer_create {
            font-size: 14px;
            font-weight: 400;
            color: #8c8c8c;
            line-height: 20px;
            text-shadow: 0px 2px 20px ragb(0 0 0 / 10%);
            margin: 0px 10px 10px 20px;
            font-family: FangSong_GB2312;
          }
          .timer-tree {
            cursor: pointer;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            /deep/ .el-tag {
              padding: 2px 6px;
              border-width: 1px;
              border-style: solid;
              border-radius: 4px;
              box-sizing: border-box;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              background: #eeeeee;
              margin-left: 10px;
              height: 24px;
              font-size: 14px;
              // font-family: SimHei;
              font-weight: 400;
              color: #8c8c8c;
              line-height: 18px;
              &:first-child {
                margin-left: 20px;
              }
            }
          }
          .el-col-5 {
            width: 11.83333%;
            position: absolute;
            top: 2px;
            right: 1px;
            .el-icon-more {
              margin-left: 10px;
            }
          }
          /deep/ .timer_check {
            /deep/ .el-checkbox__inner {
              top: -4px;
              left: 11px;
              width: 20px;
              height: 20px;
            }
            /deep/ .el-checkbox__label {
              width: 100px;
              font-size: 22px;
              height: 22px;
              font-family: "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1",
                "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
                Arial, sans-serif;
              line-height: 10px;
              margin-left: 10px;
              font-weight: 600;
              color: #262626;
            }
          }
          .item_check {
            position: absolute;
            // background: red;
            width: 20px;
            height: 20px;
            left: 10px;
            top: 10px;
            z-index: 119;
            /deep/ .el-checkbox__inner {
              top: 5px;
              left: 5px;
              width: 16px;
              height: 16px;
              &::after {
                left: 5px;
                height: 10px;
              }
            }
            /deep/ .el-checkbox__label {
              width: 100px;
              font-size: 22px;
              height: 22px;
              font-family: "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1",
                "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
                Arial, sans-serif;
              line-height: 10px;
              margin-left: 10px;
              font-weight: 600;
              color: #262626;
            }
            .el-checkbox__inner::after {
              left: 7px;
              height: 10px;
            }
          }
        }
        /deep/ .timer_check {
          left: 20px;
          .el-checkbox__input {
            left: -4px;
            top: -4px;
            .el-checkbox__inner {
              width: 20px;
              height: 20px;
              &::after {
                height: 10px;
                left: 7px;
              }
            }
          }
          .el-checkbox__label {
            font-size: 22px;
            font-family: "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1",
              "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
              Arial, sans-serif;
            font-weight: 600;
            color: #262626;
            line-height: 22px;
          }
        }
      }
    }
    // 表格模式
    .table-mode {
      width: 100%;
      border-bottom: 0px;
      margin: 0px 4%;
      border-left: 1px solid #ebeef5;
      /deep/ .table-mode-top {
        width: 91%;
        background: #f0f3fa !important;
        z-index: 99;
        .el-col {
          .table-title {
            color: #333 !important;
            font-weight: bold;
            padding-left: 20px;
            height: 46px;
            line-height: 46px;
          }
        }
      }
      .table-mode-content {
        &:first-child {
          padding-top: 44px !important;
        }
        width: 90.1%;
        &:hover {
          color: #06c !important;
          -webkit-box-shadow: 1px 6px 8px -2px #dee6fb;
          box-shadow: 1px 6px 8px -2px #dee6fb;
          .table-con {
            color: #06c !important;
            cursor: pointer;
            .el-dropdown {
              color: #06c !important;
            }
          }
        }
        .el-col {
          border-bottom: 1px solid #ebeef5;
          .table-con {
            color: #333;
            padding-left: 25px;
            height: 56px;
            line-height: 56px;
            img {
              width: 22px;
              height: 30px;
              margin-right: 10px;
            }
            .el-dropdown {
              line-height: 20px;
            }
          }
          .table-con-icon {
            display: flex;
            align-items: center;
            padding-left: 0;
            span {
              display: inline-block;
              width: 80%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .folder-name {
              width: 54%;
              /deep/ .el-input__inner {
                height: 25px;
                padding: 0 5px;
              }
            }
            i {
              font-size: 18px;
              color: #0066cc;
              cursor: pointer;
            }
          }
        }
      }
      .media-active {
        background: #f5f8ff;
      }
      .selectPictable {
        // padding-top: 85px;
        width: 100%;
        // margin-top: -27px;
        /deep/ .table-mode-top {
          background: #aaa;
        }
        .table-mode-Top {
          // &:first-child{
          padding-top: 44px;
          // }
        }
      }
    }
  }
  /deep/ .el-dialog__wrapper {
    // z-index: 2009 !important;
    .el-dialog {
      .el-dialog__body {
        .selectTags {
          .viewLeft {
            .image {
              .el-image {
                object-fit: contain;
              }
            }
          }
        }
      }
    }
  }
  .activity {
    margin-top: 50px;
  }
  .table-select {
    margin-top: 30px;
  }
  /deep/ .el-image-viewer__wrapper {
    .el-image-viewer__btn,
    .el-image-viewer__actions {
      width: 340px;
      opacity: 0;
    }
    /deep/ .el-image-viewer__mask {
      opacity: 0.85 !important;
      z-index: 2000 !important;
    }
  }

  /deep/ .el-dialog .file-dialog {
    .el-dialog__body {
      padding: 5px !important;
      .el-tabs {
        margin: 0px 20px;
        /deep/ .el-tabs__header {
          position: relative;
          box-shadow: 0px 19px 24px -19px rgba(0, 0, 0, 0.2);
          margin: 0;
          /deep/ .el-tabs__nav-scroll {
            /deep/ .el-tabs__nav {
              border: none;
              /deep/ .el-tabs__item {
                width: 100px;
                padding: 0;
                height: 45px;
                line-height: 45px;
                font-size: 18px;
                font-weight: 500;
                text-align: center;
                background: transparent;
                color: #333333;
              }
              .is-active {
                color: #0066cc;
              }
              /deep/ .el-tabs__active-bar {
                background: #0066cc;
                width: 20px !important;
                left: 40%;
                height: 4px;
              }
            }
          }
        }
        .el-tabs__content {
          .el-tab-pane:first-of-type {
            .info-form {
              padding: 10px 0px;
              .el-form-item {
                margin-bottom: 0;
                .el-form-item__label {
                  font-size: 16px;
                  text-align: left;
                  padding-left: 10px;
                }
                .el-form-item__content {
                  font-size: 16px;
                }
              }
              .sub-title {
                font-size: 17px;
                font-weight: bold;
                color: #333333;
                line-height: 36px;
              }
            }
          }
          .el-tab-pane:last-of-type {
            .permission-info {
              height: 100%;
              .permission-title {
                font-size: 14px;
                color: #333333;
                line-height: 40px;
              }
              .watch-person {
                .person-item {
                  color: #999999;
                }
                .person-split {
                  margin: 12px 0;
                }
              }
              .watch-person:last-child {
                margin-bottom: 10px;
                .person-split {
                  display: none;
                }
              }
            }
          }
        }
      }
    }
  }
  .display-button {
    position: absolute;
    display: inline-table;
    z-index: 1299;
    top: 22px;
    right: 200px;
    .el-badge {
      margin-right: 20px;
    }
  }

  .display-type {
    position: absolute;
    display: inline-block;
    width: 80px;
    right: 30px;
    top: 28px;
    z-index: 1199;

    i {
      font-size: 25px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(10%, 5%);
      color: #cccccc;
      &:hover {
        color: #aaaaaa !important;
        cursor: pointer;
      }
      &:nth-child(1) {
        left: -30px;
        width: 20px;
        height: 21px;
      }
      &:nth-child(2) {
        left: 3px;
        width: 20px;
        height: 21px;
      }
      &:nth-child(3) {
        right: 0;
        width: 20px;
        height: 21px;
        font-size: 23px;
        top: 1px;
      }
    }
  }
  .collapse-box {
    position: absolute;
    height: 60px;
    width: 40px;
    top: 0px;
    box-sizing: border-box;
    -moz-box-sizing: border-box; /* Firefox */
    -webkit-box-sizing: border-box; /* Safari */
    z-index: 1000;
    right: 166px;
    margin-top: 16px;
    span {
      display: inline-block;
      height: 100%;
      width: 100%;
      line-height: 60px;
      text-align: center;
      img {
        cursor: pointer;
        transform: rotate(270deg);
      }
    }
  }
  /deep/ .el-dialog.media-dialog {
    padding: 0 30px;
    min-width: 800px;
    min-height: 550px;
    .el-dialog__header {
      padding: 20px 20px 10px 0 !important;
      border-bottom: 1px dashed #d8d8d8;
      .media-title {
        font-size: 16px;
        color: #333;
        line-height: 24px;
      }
    }
    .el-dialog__body {
      padding: 30px 0px 20px 0px !important;
      .media-detail {
        display: flex;
        margin-top: 20px;
        .media-preview {
          width: 68%;
          height: 500px;
          margin-right: 20px;
          margin-top: 10px;
          display: flex;
          justify-content: center;
          .el-image {
            display: flex;
            justify-content: center;
            width: 670px;
            height: 500px;
            .el-image__inner {
              height: 100%;
              width: 100%;
              object-fit: contain;
            }
          }
        }
        .basic-detail {
          width: 0;
          flex-grow: 1;
          font-weight: 400;
          color: #aaaaaa;
          h3 {
            font-size: 18px;
            color: #333;
          }
          .name-info {
            .part-name,
            .dec-info {
              display: inherit;
              margin-left: 49px;
              margin-top: -30px;
            }
            vertical-align: middle;
            font-size: 14px;
            color: #606266;
            line-height: 30px;
            padding: 0 12px 0 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: wrap;
            .name-infoTag {
              margin-left: 6px;
              padding: 2px;
              border: 1px solid #409eff;
              border-radius: 4px;
              color: #409eff;
              white-space: nowrap;
            }
            &:hover {
              text-overflow: inherit;
              overflow: visible;
            }
          }
          .basic-detail-info {
            .base-info {
              padding-bottom: 15px;
              margin-top: 25px;
              background: #f6f5fa;
              h4 {
                height: 55px;
                line-height: 55px;
                font-size: 16px;
                color: #333333;
                padding: 0 10px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                border: 0.5px solid #eeeff2;
                margin-bottom: 15px;
              }
              p {
                height: 24px;
                line-height: 24px;
                color: #636363;
                font-size: 14px;
                padding: 0 10px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                .info-left {
                  float: left;
                }
                .info-right {
                  float: right;
                }
              }
            }
          }
        }
      }
      .media_isedit {
        display: flex;
        justify-content: space-between;
        // flex-direction: ;

        .isEdit_left {
          width: 460px;
          // background: pink;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          flex: 1;
          .left_img {
            width: 300px;
            height: 200px;
            margin-left: 40px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .left_nature {
            width: 300px;
            // height: 200px;
            background: #f4f4f4;
            display: flex;
            flex-direction: column;
            justify-content: inherit;
            flex-grow: 1;
            margin-left: 40px;
            margin-top: 20px;
            span {
              margin-left: 20px;
              &:last-child {
                margin-bottom: 5px;
              }
            }
            .nature_name {
              font-size: 16px;
              font-weight: 500;
              color: #000;
              margin: 10px;
            }
          }
        }
        .isEdit_right {
          width: 400px;
          height: 200px;
          // background: red;
          flex: 1;
          .left_detail {
            margin-top: 20px;
            height: 100px;
            .el-input__inner {
              width: 69%;
            }
          }
        }
      }
    }
  }
  //  加载进度条的样式
  .loading {
    width: 100%;
    height: 50px;
    text-align: center;
    @keyframes ball-beat {
      50% {
        opacity: 0.2;
        transform: scale(0.75);
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }
    &.ball-beat > .dot {
      background-color: $color-theme-default;
      vertical-align: bottom;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin: 3px;
      animation-fill-mode: both;
      display: inline-block;
      animation: ball-beat 0.7s 0s infinite linear;
    }
    &.ball-beat > .dot:nth-child(2n-1) {
      animation-delay: 0.35s;
    }
  }
  @keyframes moveFace {
    from {
    }

    to {
      bottom: 0;
    }
  }
}
// 底部---------
/deep/ .el-image-viewer__actions {
  bottom: 0px;
  width: 100%;
  height: 56px;
  padding: 0 30%;
  border-radius: 0;
  background: unset;
  .el-image-viewer__actions__inner {
    position: relative;
    font-size: 30px;
    .isShowicon,
    .foldCalss {
      cursor: pointer;
      width: 30px;
      height: 30px;
      padding: 6px;
      img {
        width: 100%;
        height: 95%;
        margin-bottom: 3px;
      }
      &:hover {
        background: #4f4f4f;

        border-radius: 20px;
      }
    }
    .foldCalss {
      width: 30px;
      height: 30px;
      img {
        // width: 100%;
        height: 95%;
        margin-bottom: 3px;
      }
    }
    .buttom_list {
      position: absolute;
      // left: 0;
      bottom: 0;
      .View {
        background: pink;
        width: 100%;
        height: 80px;
      }
    }
    .el-icon-download,
    .el-icon-zoom-out,
    .el-icon-zoom-in,
    .toggleModela,
    .el-icon-refresh-left,
    .el-icon-refresh-right {
      padding: 6px;
      &:hover {
        background: #4f4f4f;
        border-radius: 20px;
      }
    }
    .icondelt,
    .iconxqing,
    .iconeidt {
      padding: 2px 6px;
      &:hover {
        background: #4f4f4f;
        border-radius: 15px;
        border-radius: 58%;
      }
    }
  }
}

/deep/ .el-image-viewer__img {
  width: 760px; //设置图片宽度
  animation: zoomIn; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 0.8s; /* don't forget to set a duration! */
}
/deep/ .el-image-viewer__mask {
  // opacity: 0.82;
  background-color: rgba(0, 0, 0, 0.95);
}
.el-tooltip__popper {
  background: #202020 !important;
  margin-bottom: 15px !important;
}
</style>
